<template>
  <div class="main-layout-1">
    <el-form>
      <el-row :gutter="16">
        <el-col :span="6">
          <el-form-item>
            <el-input placeholder="请输入代码或名称搜索" clearable v-model="keyword"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button @click="filters">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <vxe-toolbar size="medium" ref="xToolbar" custom>
      <template #buttons>
        <el-button @click="defaultExport">默认导出</el-button>
        <el-button @click="selectedExport">选中导出</el-button>
        <el-button @click="openExportEvent">高级导出</el-button>
      </template>
      <template #tools>
        <p style="display: inline-block;font-size: 12px;text-align: right;margin: 0;">共<strong>{{tableData.recordsNum}}</strong>条记录</p>
      </template>
    </vxe-toolbar>

    <div class="vxe-table-box-wrapper">
      <vxe-table
          auto-resize
          ref="xTable"
          size="mini"
          border
          stripe
          show-header-overflow
          show-overflow
          highlight-hover-row
          height="auto"
          :loading="tableData.loading"
          :export-config="{}"
      >
        <vxe-column
            v-for="{ type, field, title, minWidth, sortable, filters } of tableData.headers"
            :type="type"
            :field="field"
            :title="title"
            :min-width="minWidth"
            :sortable="sortable"
            :filters="filters"
            type="html"
        ></vxe-column>

        <vxe-column title="操作" min-width="100" align="center" fixed="right">
          <template #default="{row}">
            <el-button size="mini" @click="gotoDetail(row)">详情</el-button>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
  </div>

</template>

<script lang="ts">
export default {
  name: 'Table',
};
</script>

<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'

const router = useRouter()

const fundTypes = [
  "混合型-偏股",
  "债券型-可转债",
  "债券型-长债",
  "指数型-股票",
  "货币型",
  "债券型-混合债",
  "混合型-灵活",
  "QDII",
  "股票型",
  "债券型-中短债",
  "混合型-偏债",
  "商品（不含QDII）",
  "混合型-平衡",
  "",
  "Reits",
]
const xTable = ref()
const xToolbar = ref()

nextTick(() => {
  xTable.value.connect(xToolbar.value)
})

const tableData = reactive({
  loading: true,
  // 1 1 4 3 7 2
  headers: [
    { type: 'seq', title: '序号', minWidth: 80 },
    { field: '0', title: '代码', minWidth: 80, filterable: true },
    { field: '2', title: '名称', minWidth: 240, sortable: true, filterable: true },
    { field: '1', title: '首字母缩写', minWidth: 180, sortable: true, filterable: true },
    { field: '4', title: '字母全拼', minWidth: 420, sortable: true, filterable: true },
    {
      field: '3',
      title: '类型',
      minWidth: 120,
      sortable: true,
      filters: fundTypes.map(item => ({ label: item, value: item })),
    },
  ],
  recordsNum: 0,
})

let records
const keyword = ref()

const filters = () => {
  tableData.loading = true
  // https://fund.eastmoney.com/js/fundcode_search.js /* 天天无调用次数限制接口 */
  axios.get('https://api.doctorxiong.club/v1/fund/all', { params: { keyWord: keyword.value } }).then(res => {
    const { code, data } = res.data
    records = data
    tableData.recordsNum = data.length
    xTable.value.loadData(records)
  }).catch(err => {
    throw new Error(err)
  }).finally(() => {
    tableData.loading = false
  })
}
filters()

const defaultExport = () => {
  xTable.value.exportData({ type: 'csv' })
}
const selectedExport = () => {
  xTable.value.exportData({
    data: xTable.value.getCheckboxRecords()
  })
}
const openExportEvent = () => {
  xTable.value.openExport()
}

const gotoDetail = (row) => {
  console.log(row)
  const [fundcode] = row
  router.push({
    path: `/fundDetail/${fundcode}`,
  })
}

</script>

<style scoped lang='scss'>

</style>
